<template>
	<view class="body">
		<xk-header title="专项检查"></xk-header>
		<view class="list" >
			<view class="list-item header" @click="orderMore = !orderMore">
				<view>计划编号:  {{data.plan_no}}</view>
				<image v-if="!orderMore" src="/static/up.png"></image>
				<image v-else  src="/static/down.png"></image>
			</view>
			<view v-if="orderMore" class="data-item">
				<view class="order-info">
					<view class="info-item"><view class="key">计划名称：</view>{{data.plan_name}}</view>
					<view class="info-item"><view class="key">检查内容：</view>{{data.sinspection_content}}</view>
					<view class="info-item"><view class="key">检查日期：</view>{{data.plan_date}}</view>
					<view class="info-item"><view class="key">检查负责人：</view>{{data.inspect_user_name}}</view>
				</view>
			</view>
		</view>
		<swiper class="swiper" :style="{height: swiperHeight + 'px'}" :current="current"
		 :duration="duration" @change="swiperTab">
			<swiper-item v-for="(item, index) in data.dets" :key="index">
				<view class="swiper-item">
					<view class="swiper-info" style="padding-bottom: 0rpx;">
						<view class="title">
							<view>检查明细</view>
							<view class="right-title">
								共<view style="margin: 0 6rpx;color: #2C72FF;">{{data.dets.length}}</view>个巡查项
							</view>
						</view>
						<view class="sub-title">{{index + 1}}/{{data.dets.length}} 巡查项</view>
						<view class="content">
							<text>
								物业片区：{{item.property_building}}/{{item.property_storey}}/{{item.property_room}}
								物业编号：{{item.property_code}}
								物业分类：{{item.property_type_name}}
								重点检查内容：{{item.check_content}}
							</text>
						</view>
						<view class="result-item">
							<view>是否异常</view>
							<radio-group @change="(e)=>{item.is_abnormal = e.detail.value}" class="radio">
								<view class="r-item">
									<radio value="1" :checked="item.is_abnormal === '1'"></radio>
									<view>是</view>
								</view>
								<view class="r-item">
									<radio value="0" :checked="item.is_abnormal === '0'"></radio>
									<view>否</view>
								</view>
							</radio-group>
						</view>
						<view style="margin-top: 20rpx;">
							<input class="result-input" v-model="item.abnormal_desc" placeholder="请输入异常描述" placeholder-class="placeholder" />
						</view>
						<view class="handle-btn">
							<view v-if="index != 0" @click="()=>{current--}">上一项</view>
							<view v-if="index != data.dets.length - 1" @click="()=>{current++}">下一项</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- <view class="from-item" style="margin-top: 20rpx;">
			<view class="title">检查记录</view>
			<textarea type="text" placeholder="在此输入巡查检查记录" placeholder-class="placeholder"/>
		</view> -->

		<view class="from-item upload-img-item" style="margin-top: 20rpx;">
			<view class="title">上传现场图片</view>
			<upload-image :images="formInfo.record_image" @onChange="(images) => {formInfo.record_image = images}"/>
		</view>

		<view class="from-item">
			<view class="title">备注</view>
			<textarea v-model="formInfo.record_remark" type="text" placeholder="在此输入备注" placeholder-class="placeholder"/>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn" @click="submitTask">提交</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderMore: true,
				swiperHeight: 624,
				touchable: true, //禁止手指滑动切换
				duration: 500, //滑动时长
				current: 0, //当前显示的下标
				data: {
					dets:[]
				},
				formInfo:{
					spection_id: '',
					record_content: '',
					record_image: '',
					record_remark: '',
					isSubmit: true,

				}
			};
		},
		onLoad(options){
			this.formInfo.spection_id = options.spectionId
			this.getData()
		},
		onShow(){
			this.setSwiperHeight()
		},
		methods:{
			getData(){
				this.$api.baseData_getPmSinspection(this.formInfo.spection_id).then((res)=>{
					this.data = res.task
				})
			},
			swiperTab(e) {
				this.current = parseInt(e.target.current);
				this.setSwiperHeight()
			},
			setSwiperHeight() {
				this.$util.getElRect('.swiper-item').then(res=>{
					this.swiperHeight = res.height;
				})

			},
			submitTask(){
				let isFinish = true;
				let isErrorNoDesc = false;
				for(let item of this.data.dets){
					if(item.is_abnormal === null || item.is_abnormal === ''){
						isFinish = false
						break
					}else if(item.is_abnormal === '1' && !item.abnormal_desc){
						isErrorNoDesc = true
						isFinish = false
						break
					}
				}
				if(!isFinish){
					if(isErrorNoDesc){
						this.$util.alert({
							content: "异常项目请填写异常描述",
						})
					}else{
						this.$util.alert({
							content: "存在未完成检查项，无法完成提交",
						})
					}
					return
				}
				this.$util.confirm({
					content: "确定提交完成检查？",
					confirmText: "完成检查"
				}).then(isConfirm => {
					if (isConfirm) {
						let detsData = [];
						for(let item of this.data.dets){
							if(item.is_abnormal == '1' && item.abnormal_desc){
								this.formInfo.record_content += item.abnormal_desc
								this.formInfo.record_content += '\n'
							}
							detsData.push({
								sinspection_det_id: item.sinspection_det_id,
								is_abnormal: item.is_abnormal,
								abnormal_desc: item.abnormal_desc,
							})
						}
						this.$util.post({
							url: "app/pmSinspection/register",
							data: {
								dets: detsData,
								...this.formInfo
							}
						}).then(res => {
							uni.$emit('refreshHomeDataList')
							uni.$emit('refreshSpecialCheck')
							uni.redirectTo({
								url: '/pagesA/special-check/special-check-finish?type=done'
							})
						})

					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
@import '@/common/from.scss';
.result-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	.radio{
		display: flex;
		.r-item{
			display: flex;
			align-items: center;

			margin-right: 40rpx;
		}
	}
}
</style>
